<template>
  <div class="w-full h-full backdrop-blur-[40px]" v-show="model">
    <div v-show="!addLinkWebVisible" class="flex flex-col">
      <div
        class="flex-center cursor-pointer my-[22px] gap-[5px] text-custom-black text-sm"
        @click="addTemplate"
      >
        <span>添加小组件</span>
        <span class="iconfont icon-more_icon"></span>
      </div>
      <div class="flex-center w-full max-w-md mb-[10px]">
        <div
          class="relative flex items-center bg-black/5 rounded-[8px] mx-[24px] w-full"
        >
          <div class="pointer-events-none absolute left-[10px] top-[7px]">
            <i
              class="iconfont text-[20px] duration-150 icon-magnifier_icon text-color-t2"
            ></i>
          </div>

          <input
            type="text"
            placeholder="搜索"
            class="pl-[30px] bg-transparent border-none focus:outline-none flex-grow mx-2 text-sm"
            v-model="queryParam"
          />
          <div class="p-1">
            <button
              class="bg-white text-gray-800 px-[16px] rounded-[8px] text-sm h-[36px]"
              @click="addLinkWebVisible = true"
            >
              {{ $t('message.customsAdd') }}
            </button>
          </div>
        </div>
      </div>
      <IconTab :queryParam="queryParam" @select="addIcon"></IconTab>
    </div>
    <AddLinkWeb
      v-model="addLinkWebVisible"
      v-model:data="currentData"
      :type="optType"
      @submit="submit"
      @back="addLinkWebVisible = false"
    ></AddLinkWeb>
  </div>
</template>
<script setup lang="ts">
import { ref, inject, Ref, watchEffect } from 'vue';
import IconTab from '../elements/IconTab.vue';
import AddLinkWeb from '../elements/AddLinkWeb.vue';
import { ElMessage } from 'element-plus';
import { LinkItem } from '../api/resource';
import { useContextMenuStore } from '../store';

type OptType = 'add' | 'edit';

const addLinkWebVisible = ref(false);
const optType = ref<OptType>('add');
const currentData = ref<LinkItem>({});

const queryParam = ref('');

const model = defineModel();

const contextMenuStore = useContextMenuStore();

function resetData() {
  currentData.value = {
    name: '',
    target: '',
    bgType: '',
    bgImage: '',
    bgColor: '#45743B',
    type: '',
    origin: '',
    bgText: '',
  };
}
watchEffect(() => {
  if (!model.value) {
    addLinkWebVisible.value = false;
    resetData();
    optType.value = 'add';
  }
});

watchEffect(() => {
  if (
    contextMenuStore.target &&
    ['editFolderIcon', 'editIcon'].includes(contextMenuStore.menuActive)
  ) {
    addLinkWebVisible.value = true;
    currentData.value = contextMenuStore.target;
    optType.value = 'edit';
  }
});

// watchEffect(() => {
//   if (!addLinkWebVisible.value) {
//     resetData();
//     optType.value = "add";
//   }
// });

const currentCate = inject<Ref<string>>('currentCate');
const emits = defineEmits(['add', 'edit','addTemplate']);

const commonFn = (data, type) => {
  let sysIconId = data.id
  const icon = { ...data, type: 'site', sysIconId: sysIconId , id: 'site-' + new Date().getTime()};

  emits(type, icon);
  addLinkWebVisible.value = false;
};
const addIcon = (data) => {
  commonFn(data, 'add');
};
const submit = (data) => {
  commonFn(data, optType.value);
  if (optType.value === 'edit') {
    model.value = false;
  }
};


const search = () => {
  console.log('search');
  // 搜索图标
};
// 添加小组件
const addTemplate=()=>{
  emits('addTemplate')
}
</script>
<style scoped></style>
<style></style>
